<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="../packages/reactivity/dist/reactivity.global.js"></script>
<script type="module">

    let {
        reactive,
        shallowReactive,
        readonly,
        shallowReadonly, effect
    } = VueReactivetiy
    let state = reactive({name: "张三", age: 19, list: [1, 2, 3], a: 200});


    effect(() => {
        app.innerHTML = state.name + "=====" + state.list[2];
        app.innerHTML = state.name + "=====" + state.list[2];
    })


    setTimeout(() => {
        state.name = "555"
        state.list.length = 1

    }, 1000)
    state.name
</script>
</body>
</html>